<template>
  <div class="router-history" ref="router-history">
    <!--访问历史标签-->
    <div class="router-history-list-box">
      <el-tag
        v-for="tag in listArr"
        :key="tag.name"
        size="medium"
        :disable-transitions="true"
        :class="$router.currentRoute.fullPath.substr(1)===tag.url?'curr':'normal'"
        type="info"
        closable
        @close="deleteTag(tag)">
        <div @click="$router.push(tag.url)" class="item">
          <span class="dot"></span>
          <span class="title">{{ tag.name }}</span>
        </div>
      </el-tag>
    </div>
    <!--操作按钮-->
    <el-dropdown v-if="false" trigger="click" @command="closeAll">
      <span class="el-dropdown-link more-act-button">
        批处理<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-plus" command="all">关闭所有</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-plus" command="other">关闭其他</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
// 路由记录组建
export default {
  name: 'RouteHistory',
  mounted: function () {
    var url = this.$router.currentRoute.fullPath.substr(1)
    this.checkRoute(url)
  },
  watch: {
    $route: function (to, from) {
      // var fromName = this.getRouteName(from.fullPath)
      // 路由变化,记录访问
      var url = to.fullPath.substr(1)
      this.checkRoute(url)
    }
  },
  methods: {
    // 删除记录
    deleteTag (tag) {
      var $this = this
      $this.listArr.splice($this.listArr.indexOf(tag), 1)
      var isCurr = false
      $this.listArr.forEach(function (value, key) {
        if (value.url === $this.$router.currentRoute.fullPath.substr(1)) {
          isCurr = true
        }
      })
      if (!isCurr) {
        $this.$router.push({
          path: '/' + $this.listArr[0].url
        })
      }
    },
    // 检查路由
    checkRoute: function (url) {
      var index = -1
      this.listArr.forEach(function (value, key) {
        if (value.url === url) {
          index = key
        }
      })
      // 如果没有匹配的
      if (index === -1) {
        var toName = this.getRouteName(url)
        if (toName === '') {
          console.log('路由在菜单中没有找到')
          return
        }
        this.listArr.push({
          name: toName,
          url: url
        })
      }
      this.$forceUpdate()
    },
    // 获取路由对应的菜单名称
    getRouteName: function (url) {
      var $this = this
      var name = ''
      $this.GlobalData.MenuArr.forEach(function (value, key) {
        value.subMenu.forEach(function (_value, _key) {
          if (_value.url === url) {
            name = _value.name
          }
        })
      })
      return name
    },
    // 删除路由记录
    closeAll: function (command) {
      var $this = this
      // console.log('command:' + command)
      // 主页操作关闭全部
      if (command === 'all' && $this.$router.currentRoute.fullPath.substr(1) === 'home') {
        command = 'other'
      }
      // 删除所有记录
      if (command === 'all') {
        this.listArr = []
        this.$forceUpdate()
        this.$router.push('home')
      }
      if (command === 'other') {
        // 关闭其他记录

        var arr = []
        $this.listArr.forEach(function (value, key) {
          if (value.url === $this.$router.currentRoute.fullPath.substr(1)) {
            arr.push(value)
          }
        })
        $this.listArr = arr
        $this.$forceUpdate()
      }
    }
  },
  data: function () {
    return {
      listArr: []
    }
  }
}
</script>
<style scoped>
.router-history {
  height: 30px;
  line-height: 30px;
  background: #fcfcfc;
  padding: 2px;
  text-align: left;
  display: flex;
  background: #f5f5f5;
}

.router-history .el-tag {
  margin-left: 2px;
  border-radius: 0px;
  background: #FFFFFF;
  border: 1px solid #CCCCCC;
  /*cursor: pointer;*/
}

.router-history .el-tag .item {
  cursor: pointer;
  display: inline-block;
}

.router-history .el-tag span.dot {
  width: 8px;
  height: 8px;
  background: #CCCCCC;
  display: inline-block;
  margin-left: 0px;
  margin-right: 5px;
  border-radius: 5px;
}

.router-history .el-tag.curr {
  border: 1px solid #1E9FFF;
  color: #1E9FFF;
}

.router-history .el-tag:active {
  opacity: 0.8;
}

.router-history .el-tag.curr span.dot {
  background: #1E9FFF;
}

.router-history .el-tag span.title {
  display: inline-block;
  cursor: pointer;
}

.router-history .el-tag span.title:hover {
  color: #1E9FFF;
}

.router-history-list-box {
  width: 90%;
  height: 30px;
  overflow-y: scroll;
  overflow-x: hidden;
  flex: 1;
}

.more-act-button {
  display: inline-block;
  width: 70px;
  background: #EEEEEE;
  text-align: center;
  cursor: pointer;
  color: #888888;
}

.more-act-button:active {
  opacity: 0.8;
}
</style>
